<template>
  <div id="myEChartsline"></div>
</template>
<script setup>
const { proxy } = getCurrentInstance() //全局注册main后导入使用

const data = reactive({
  myEChart: '',
  StatisticsVisit1: [],
  StatisticsVisit2: [],
})

//配置echarts
const initChart = () => {
  // 设置配置项
  const option = {
    title: {
      text: '一周访问量',
      textStyle: {
        fontSize: 15, // 字体尺寸
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['浏览量'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.StatisticsVisit1,
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          // 设置y轴颜色
          color: '#048CCE',
        },
      },
    },
    series: [
      {
        name: '浏览量',
        type: 'line',
        stack: 'Total',
        data: data.StatisticsVisit2,
      },
    ],
  }
  // 复制
  data.myEChart.setOption(option)
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    data.myEChart.resize()
  })
}

onMounted(() => {
  data.myEChart = proxy.$echarts.init(document.getElementById('myEChartsline'))

  req.StatisticsIndex().then((e) => {
    console.log(e)
    if (e.code == 20000) {
      e.data.uniqueViewDTOList.forEach((el) => {
        data.StatisticsVisit1.push(el.day)
        data.StatisticsVisit2.push(el.viewsCount)
      })
      initChart()
    }
  })
})

// onUnmounted(() => {
//   echart.dispose
// })
</script>
<style>
#myEChartsline {
  max-height: 500px;
  /* max-height: 400px; */
  height: 500px;
}
</style>
